<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="权限" width="60%"
		:model-value="visible" @close="onCancel">
		<template #footer>
			<el-button key="back" @click="() => onCancel()">取消</el-button>
			<el-button key="submit" type="primary"  @click="UpdatePermission">提交</el-button>
		</template>

		<el-table :data="list" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
			<el-table-column prop="Id" label="id" sortable />
			<el-table-column prop="RoleName" label="角色名称" />
			<el-table-column label="是否有权限" prop="action" width="160">
				<template #default="{row}">
					<el-checkbox v-model="row.hasPermission"></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column prop="Description" label="角色说明" :formatter="Description" />

			
		</el-table>
		<pagebutton-form :visible="pageButtonFormVisible" :onCancel="() => setPageButtonFormVisible(false)"
			:onSubmit="setPageButonSubmit" :btns="roleBtns" />
	</el-dialog>


</template>

<script lang="ts">
	import Icon from '@/components/IconSvg';
	import PagebuttonForm from './PagebuttonForm.vue'
	import {
		PageButtonItem,
		TableListItem,
		RoleModuleItem,

	} from "../data.d";
	import {
		computed,
		ComputedRef,
		defineComponent,
		PropType,
		reactive,
		ref,
		Ref,
		watch
	} from "vue";
	import {
		useI18n
	} from "vue-i18n";
	import {
		ElForm,
		ElMessage,
		ElTree
	} from "element-plus";
	import {
		useStore
	} from "vuex";
	import {
		StateType as ListStateType
	} from "../store";
	import {
		queryRoleData,
		updataRoleData,
		ListByModule,
		updataModulePermission
	} from '../service'


	export default defineComponent({
		name: 'PermissionForm',
		props: {
			ModuleId: {
				type: Number,
				required: true
			},
			visible: {
				type: Boolean,
				required: true
			},
			onCancel: {
				type: Function,
				required: true
			},
			onSubmit: {
				type: Function,
				required: true
			},

		},
		components: {
			Icon,
			PagebuttonForm
		},
		data() {
			return {
				setBtndialogVisible: false,
				pageButtonFormVisible: false,
				roleBtns: '',
				curentId: 0
			}
		},

		methods: {

			// popSetBtn() {
			// 	this.setBtndialogVisible = true
			// },
			// setPageButtonFormVisible(isVisible : boolean) {
			// 	this.pageButtonFormVisible = isVisible
			// },
			// setPageButtonForm(id : number, btns : string) {
			// 	this.curentId = id
			// 	let index = this.roleNodes.findIndex((item) => {
			// 		return item.id == id;
			// 	})
			// 	this.roleBtns = this.roleNodes[index].Rolebtns;
			// 	if (!this.roleBtns) {
			// 		this.roleBtns = btns;
			// 	}

			// 	this.pageButtonFormVisible = true;
			// },
			// setPageButonSubmit(data) {
			// 	console.log('roleBtns', data)
			// 	let index;
			// 	let row;

			// 	for (let i = 0; i < this.list.length; i++) {
			// 		if (this.list[i].Id == this.curentId) {
			// 			index = i;
			// 			row = this.list[i];
			// 		}
			// 	}
			// 	row.roleBtns = JSON.stringify(data);
			// 	this.list.splice(index, 1, row)
			// 	this.pageButtonFormVisible = false;

			// }
		},
		setup(props) {
			
			const list = ref()

			const getList = async () : Promise<void> => {
				list.value = await ListByModule(props.ModuleId);

			}
			watch(()=>props.visible,
				(visible)=>{
					if(visible){
						console.log(props)
						getList()
					}
				}
			)
			const UpdatePermission=()=>{
				let roles=list.value.filter(item=>item.hasPermission).map((item)=>{
					return {
					RoleId:item.Id,
					Btns:item.Btns,
					}
				})
				console.log(roles)
				updataModulePermission(props.ModuleId,roles).then(res=>{
					props.onSubmit()
				})
			} 
			return {
				list,
				UpdatePermission

			}
		}
	})
</script>

<style>
</style>